<style rel="stylesheet/scss" lang="scss" scoped>
.table tr {
  border-bottom: 1px solid #EBEEF5;
  line-height: 40px;
  height: 40px;
  padding: 5px 10px;
}

.table tr:nth-child(2n-1) {
  background: #F7F9FA
}

.table {
  border-collapse: collapse;
  cellspacing: 0;
  text-align: center;
}

.el-icon-question {
  color: #347DE1
}

.colorblue {
  color: #424957
}
</style>
<template>
  <div class="app-container">
    <el-row type="flex" class="row-bg">
      <el-col :span="8">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <div class="el-page-header">
              <div class="el-page-header__left" @click="goBack">
                <i class="el-icon-back"></i>
                <div class="el-page-header__title">返回</div>
              </div>
              <div class="el-page-header__content" style="font-size: 15px;">基本信息</div>
            </div>
          </div>
          <table class="table" style="width: 100%;">
            <tbody>
            <tr>
              <td class="field-label">节点名称</td>
              <td colspan="3" class="field-value currentModeOnly" style="margin-left: 10px;">
                {{ agentInfo.agentName }}
              </td>
            </tr>
            <tr>
              <td class="field-label">节点编码</td>
              <td class="field-value currentModeOnly">
                {{ agentInfo.agentCode }}
              </td>
              <td class="field-label">并发数</td>
              <td class="field-value currentModeOnly">
                <div class="usage" style="    margin-top: -7px;">
                  <span class="usage-reading">{{ agentInfo.usedConNum }}/{{ agentInfo.concurrentNum }}</span>
                  <el-progress :percentage="agentInfo.conUsageRate" :show-text=false
                               :color="customColor"
                               style="margin-bottom: 4px;margin-top: -10px;padding-right: 10px;"/>
                </div>
              </td>
            </tr>
            <tr>
              <td class="field-label">IP</td>
              <td class="field-value">
                {{ agentInfo.agentIp }}
              </td>
              <td class="field-label">资源数</td>
              <td class="field-value currentModeOnly">
                <div class="usage" style="    margin-top: -7px;">
                  <span class="usage-reading">{{ agentInfo.usedResNum }}/{{ agentInfo.resNum }}</span>
                  <el-progress :percentage="Number(agentInfo.resUsageRate)" :show-text=false
                               :color="customColor"
                               style="margin-bottom: 4px;margin-top: -10px;padding-right: 10px;"/>
                </div>
              </td>
            </tr>
            <tr>
              <td class="field-label">最后更新</td>
              <td colspan="3" class="field-value currentModeOnly">
                {{ agentInfo.upTs }}
              </td>
            </tr>
            </tbody>
          </table>
        </el-card>

        <el-card class="box-card" :body-style="{ padding: '0px' }" style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <span>运行状况历史记录</span>
          </div>
          <div class="grid-content bg-purple">
            <el-table
              :show-header="false"
              :data="tableData1"
              style="width: 100%;border:1px solid #D6D8DB;"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="运行状况">
                      <span>{{ props.row.remindTitle }}</span>
                    </el-form-item>
                    <el-form-item label="时间">
                      <span>{{ props.row.crtTs }}</span>
                    </el-form-item>
                    <el-form-item label="原因">
                      <span>{{ props.row.remindContent }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column
                prop="warnLevel"
                label="运行状况">
                <template slot-scope="scope">
                  <i class="el-icon-success" v-if="scope.row.warnLevel == 'info'"
                     style="color: #42800d;font-size: 16px"></i>
                  <i class="el-icon-warning" v-if="scope.row.warnLevel == 'warn'"
                     style="color: #FF8300;font-size: 16px"></i>
                  <i class="el-icon-warning" v-if="scope.row.warnLevel == 'error'"
                     style="color: #DE1502;font-size: 16px"></i>
                  <span style="margin-left: 10px">{{ scope.row.remindTitle }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="crtTs"
                label="时间">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.crtTs }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>

        <el-card class="box-card" :body-style="{ padding: '0px' }" style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <span>磁盘状况</span>
          </div>
          <div class="grid-content bg-purple">
            <el-table
              :data="fileTableData"
              stripe
              style="width: 100%;border:1px solid #D6D8DB;">
              <el-table-column
                prop="fileDevName"
                label="磁盘">
              </el-table-column>
              <el-table-column
                prop="usage"
                :show-overflow-tooltip="true"
                label="使用情况">
                <template slot-scope="scope">
                  {{ readFileSizeUnit(scope.row.fileUsed) }}/{{ readFileSizeUnit(scope.row.fileTotal) }}
                  <el-progress v-if="scope.row.fileUsedRate < 80" :percentage="scope.row.fileUsedRate" :show-text=false
                               status="success"></el-progress>
                  <el-progress v-if="scope.row.fileUsedRate >= 80 && scope.row.fileUsedRate < 90"
                               :percentage="scope.row.fileUsedRate"
                               :show-text=false status="warning"></el-progress>
                  <el-progress v-if="scope.row.fileUsedRate >= 90" :percentage="scope.row.fileUsedRate"
                               :show-text=false status="exception"></el-progress>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16" style="margin-left: 20px">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span>图表</span>
            <div style="float:right;" class="aa">
              <a style="margin-left: 10px;" v-for="(item,i) in timeArr" :key="i" :class="{colorblue:cur==i}"
                 target="_blank" class="buttonText"
                 @click="changeDay(i)">{{ item }}
              </a>
            </div>
          </div>
          <div style="padding: 10px">
            <el-row>
              <el-col :span="12" style="padding: 10px">
                <div class="grid-content bg-purple-light" style="border:1px solid #D6D8DB;">
                  <div @mouseenter="enters('cpuShow')"
                       @mouseleave="leaver('cpuBlock')"
                       style="font-size: 14px;margin: 1%;font-weight: 700;">CPU使用率
                    <el-tooltip class="item" effect="dark" content="分解为多个使用情况类别的CPU使用情况."
                                placement="bottom">
                      <i style="margin-left: 3%" class="el-icon-question"></i>
                    </el-tooltip>
                  </div>
                  <div>
                    <service-requests-cpu :cpu-info-chart="cpuInfoChart"/>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" style="padding: 10px">
                <div class="grid-content bg-purple-light" style="border:1px solid #D6D8DB;">
                  <div style="font-size: 14px;margin: 1%;font-weight: 700;">内存使用率
                    <el-tooltip class="item" effect="dark" content=""
                                placement="bottom">
                      <i style="margin-left: 3%" class="el-icon-question"></i>
                    </el-tooltip>
                  </div>
                  <div>
                    <service-requests-ram :ram-info-chart="ramInfoChart"/>
                  </div>
                </div>
              </el-col>
            </el-row>

            <el-row style="margin-top: 10px">
              <el-col :span="12" style="padding: 10px">
                <div class="grid-content bg-purple-light" style="border:1px solid #D6D8DB;">
                  <div style="font-size: 14px;margin: 1%;font-weight: 700;">磁盘使用率
                    <el-tooltip class="item" effect="dark"
                                content="磁盘使用率"
                                placement="bottom">
                      <i style="margin-left: 3%" class="el-icon-question"></i>
                    </el-tooltip>
                  </div>
                  <div>
                    <service-requests-avg :fileSysInfoChart="fileSysInfoChart"/>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import node from '@/api/system/node'
import dict from '@/api/system/dict'
import ServiceRequestsCpu from '../../../components/ServiceRequestsCpu'
import ServiceRequestsRam from '../../../components/ServiceRequestsRam'
import ServiceRequestsAvg from '../../../components/ServiceRequestsAvg'
import RadarChart from '@/components/Echarts/RadarChart'
import PieChart from '@/components/Echarts/PieChart'
import BarChart from '@/components/Echarts/BarChart'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import {getCpuChartData} from '@/api/echars/nodeInfo'
import {getRamChartData} from '@/api/echars/nodeInfo'
import {getAvgChartData} from '@/api/echars/nodeInfo'
import {getFileSysInfo} from '@/api/echars/nodeInfo'

export default {
  name: 'heartInfo',
  components: {
    ServiceRequestsCpu,
    ServiceRequestsRam,
    ServiceRequestsAvg,
    RadarChart,
    PieChart,
    BarChart,
    dict
  },
  mixins: [crud()],
  dicts: ['AGENT_STATUS'],
  data() {
    return {
      // time: '',
      cur: 0,
      timeArr: ['30分钟', '1小时', '6小时', '12小时', '1天', '7天'],
      tableData: [
        {name: 'Master', logFile: '角色日志文件 Stdout Stderr'},
        {name: 'RegionServer', logFile: '角色日志文件 Stdout Stderr'},
        {name: 'Balancer', logFile: '角色日志文件 Stdout Stderr'},
        {name: 'Gateway', logFile: '角色日志文件 Stdout Stderr'}
      ],
      tableData1: [],
      fileTableData: [],
      gridData: [
        {"operation": "以JSON格式导出"},
        {"operation": "以CSV格式导出"},
        {"operation": "查看详情"}
      ],
      UNITS: ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
      STEP: 1024,
      cpuInfoChart: {},
      ramInfoChart: {},
      avgInfoChart: {},
      customColor: "#42800D",
      percentage: 20,
      detailShow: "",
      disOption: {
        cpuDisplay: false,
        memDisplay: true,
        fzDisplay: true,
        alertDisplay: true
      },
      fileSysInfoChart: {},
    }
  },
  props: {
    agentInfo: Object,
    time: {
      type: String
    }
  },
  computed: {},
  created() {
    this.init(this.agentInfo.agentCode);
    this.getCpuInfo()
    this.getRamInfo()
    this.getAvgInfo()
    this.getFileSysData()
  },
  methods: {
    //选择不同的时间
    changeDay(val) {
      this.cur = val
      let time = ""
      if (val == 0) {
        time = 0.5
      } else if (val == 1) {
        time = 1
      } else if (val == 2) {
        time = 6
      } else if (val == 3) {
        time = 12
      } else if (val == 4) {
        time = 24
      } else if (val == 5) {
        time = 168
      }
      this.time = time
      this.getCpuInfo()
      this.getRamInfo()
      this.getFileSysData()
      //this.getAvgInfo()
    },
    //cpu折线图
    getCpuInfo() {
      getCpuChartData(this.time, this.agentInfo.agentCode).then(res => {
        this.cpuInfoChart = res
      })
    },
    //内存折线图
    getRamInfo() {
      getRamChartData(this.time, this.agentInfo.agentCode).then(res => {
        this.ramInfoChart = res
      })
    },
    //平均负载折线图
    getAvgInfo() {
      getAvgChartData(this.time, this.agentInfo.agentCode).then(res => {
        this.avgInfoChart = res
      })
    },
    enters(param) {
      if ("cpuShow" == param) {
        this.disOption.cpuDisplay = true;
      }
    },
    leaver(param) {
      if ("cpuBlock" == param) {
        this.disOption.cpuDisplay = false;
      }
    },
    goBack(param) {
      this.$emit('closeHeart', false);
    },
    //初始化节点运行状况
    initAgentStatsList(code) {
      //查询节点的运行状况记录
      node.selectAgentStates(code).then(res => {
        if (res) {
          this.tableData1 = res;
        }
      })
    },

    //初始化节点下的磁盘状况
    initFile(code) {
      node.selectDiscByCode(code).then(res => {
        if (res) {
          this.fileTableData = [];
          this.fileTableData.push(res.agentFileSys);
        }
      })
    },
    init(code) {
      this.initAgentStatsList(code);
      this.initFile(code);
      this.initFileSysInfoData(code);
    },
    format: function format(value, power) {
      return (value / Math.pow(this.STEP, power)).toFixed(2) + this.UNITS[power];
    },
    readFileSizeUnit: function (value) {
      value = parseFloat(value, 10);
      for (var i = 0; i < this.UNITS.length; i++) {
        if (value < Math.pow(this.STEP, i)) {
          if (this.UNITS[i - 1]) {
            return this.format(value, i - 1);
          }
          return value + this.UNITS[i];
        }
      }
      return this.format(value, i - 1);
    },
    getFileSysData() {
      getFileSysInfo(this.time, this.agentInfo.agentCode).then(res => {
        this.fileSysInfoChart = res
        //alert(this.cpuInfoChart.cpuUseData)
      })
    },
    initFileSysInfoData(code) {
      node.getMemoryObjInfoList(code).then(res => {
        if (res) {
          this.fileTableData = res;
        }
      })
    }
  }
}
</script>
